<template>
	<div class="app-container">
		<el-container>
			<el-header>
				<div>
					<span class="spans">菜单名称</span>
					<el-input placeholder="请输入菜单名称" v-model="pageData.input" size="small" clearable> </el-input>
					<el-button class="btn" size="small">查询</el-button>
				</div>
				<div>
					<el-button size="small" @click="btnClick('编辑')">新增节点</el-button>
				</div>
			</el-header>
			<div class="rongqine">
				<el-aside>
					<el-tree style="width: 100%" :data="pageData.listItem" accordion @node-click="handleNodeClick">
						<template #default="{ data }">
							<span v-if="data.meta">
								{{ data.meta.title }}
							</span>
						</template>
					</el-tree>
				</el-aside>
				<el-main>
					<el-table :data="pageData.listItem" border style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
						<el-table-column prop="title" label="菜单名称" width="180">
							<template #default="props">
								{{ props.row.meta.title }}
							</template>
						</el-table-column>
						<el-table-column prop="name" label="菜单路径">
							<template #default="props">
								{{ props.row.path }}
							</template>
						</el-table-column>
						<el-table-column prop="address" label="菜单图标" width="180">
							<template #default="props">
								<i :class="props.row.meta.icon"></i>
							</template>
						</el-table-column>
						<el-table-column prop="address" label="操作">
							<template #default="props">
								<el-button type="text" size="small" @click="btnClick('编辑', props.row)">编 辑</el-button>
								<el-button type="text" size="small" @click="btnClick('删除', props.row)">删 除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</div>
		</el-container>
		<addNode :adNodeShow="pageData.adNodeShow" :title="pageData.title" @comShow="comShow" />
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, nextTick } from 'vue'
import addNode from './components/index.vue'
import { useStore } from 'vuex'
export default defineComponent({
	name: 'page',
	components: {
		addNode,
	},
	data() {
		return {
			adNodeShow: false,
			title: '',
		}
	},

	methods: {},

	setup() {
		const list: object[] = []
		const pageData = reactive({
			input: '',
			listItem: list,
			adNodeShow: false,
			title: '',
		})

		const btnClick = (title: string, obj: object) => {
			pageData.title = title
			comShow()
		}

		const comShow = () => {
			setTimeout(() => {
				pageData.adNodeShow = !pageData.adNodeShow
			})
		}

		const dealWthData = () => {
			useStore()
				.getters.permissionRoutes.filter((item: any) => !!item.meta || (!item.meta && item.children))
				.forEach((item: any) => {
					if (!!!item.meta && item.children) {
						item.children.forEach((items: object) => {
							pageData.listItem.push(items)
						})
					} else {
						pageData.listItem.push(item)
					}
				})
		}
		const handleNodeClick = (data: any) => {}

		onMounted(() => {
			dealWthData()
		})
		return {
			pageData,
			handleNodeClick,
			comShow,
			btnClick,
		}
	},
})
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
